import React from 'react'
import Logo from '../assets/images/index/logo.png';
import User from '../assets/images/index/user.png';
import { useNavigate } from 'react-router-dom';
import { Progress} from 'antd';
import Analysis from '../assets/images/test/analysis.png';
import Del from '../assets/images/test/del.png';

export default function startTest() {
  const navigate = useNavigate()
  function totest() {
    navigate('/starttest')
  }
  return (
    <div>
      <div className='toubu'>
        <img src={Logo} alt="" style={{ marginLeft: 360 }} />
        <div style={{ fontSize: 20, color: '#fff', marginRight: 600 }}>前端第一阶段考试</div>
        <div>
          <img src={User} alt="" />
          <span style={{ marginRight: 382 }} className='toubuwz'>李四</span>
        </div>
      </div>
      <div style={{ display: 'flex', width: 1200, marginTop: 20 }} className='m0'>
        <div className='left1'>
          <div style={{ marginTop: 15, marginLeft: 25 }}>
            <span style={{ fontSize: 18, color: '#333333' }}>答题卡</span>
          </div>
          <div style={{ marginTop: 15, marginLeft: 20 }}>
            <span style={{ fontSize: 12, color: '#333333' }}>单选题</span>
          </div>
          <div style={{ display: 'flex', marginLeft: 20, marginTop: 15 }}>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>1</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>2</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>3</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>4</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>5</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>6</span></div>

            </div>
          </div>
          <div style={{ display: 'flex', marginLeft: 20, marginTop: 10 }}>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>7</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>8</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>9</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>10</span></div>

            </div>
          </div>
          <div className='leftcutter'></div>
          <div style={{ marginTop: 15, marginLeft: 20 }}>
            <span style={{ fontSize: 12, color: '#333333' }}>多选题</span>
          </div>
          <div style={{ display: 'flex', marginLeft: 20 ,marginTop:15}}>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>1</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>2</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>3</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>4</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>5</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>6</span></div>

            </div>
          </div>
          <div style={{ display: 'flex', marginLeft: 20, marginTop: 10 }}>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>7</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>8</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>9</span></div>

            </div>
            <div style={{ marginLeft: 6 }}>
              <div style={{ backgroundColor: '#f1f3f8', width: 20, height: 15, display: 'flex', justifyContent: 'center', alignItems: 'center' }}><span style={{ color: '#999', fontSize: 12 }}>10</span></div>

            </div>
          </div>
          <div className='leftcutter'></div>
          <div className='leftBottom1'>
            <div style={{ width: 10, height: 10, backgroundColor: '#726fff', marginLeft: 100 }}></div>
            <div style={{ fontSize: 12, color: '#666666', marginLeft: 6 }}>正确</div>
            <div style={{ width: 10, height: 10, backgroundColor: '#ff4b50', marginLeft: 6 }}></div>
            <div style={{ fontSize: 12, color: '#666666', marginLeft: 6 }}>错误</div>
          </div>
        </div>
        <div className='centercontent1'>
          <div style={{ width: '100%', height: 60, backgroundColor: '#f5f5f5', display: 'flex', alignItems: 'center' }}>
            <span style={{ fontSize: 20, color: '#333', marginLeft: 20 }}>单选题</span>
          </div>
          <div className='mainerror'>
            <div style={{ marginLeft: 15 }}>1.递接文件</div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10, marginLeft: 25 }}>
              <div className='choices'></div>
              <div>A.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10, marginLeft: 25 }}>
              <div className='choices' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <div className='choice'></div>
              </div>
              <div>B.正面朝向对方</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 10, marginLeft: 25 }}>
              <div className='choices'></div>
              <div>C.正面朝向对方</div>
            </div>
            <div className='centercut'></div>
            <div style={{marginLeft:30,marginBottom:20}}>
              正确答案：A
            </div>
            <div style={{marginLeft:30}}>
              答案解析：答非所问，词不达意
            </div>
            <div style={{marginTop:420,display:'flex',justifyContent:'right',alignItems:'center'}}>
              <img src={Analysis} alt="" style={{width:15,height:15,marginRight:10}} />
              <span style={{marginRight:20}}>查看解析</span>
              <img src={Del} alt="" style={{width:15,height:15,marginRight:10}} />
              <span>删除本题</span>
            </div>
          </div>
        </div>
        <div className='rightprogress'>
          <div style={{ marginTop: 10 }}>当前进度</div>
          <div >3/20</div>
          <div className='progresscutter'><Progress percent={30} showInfo={false} /></div>
        </div>
        <div className='preOrNext'>
          <div style={{ color: '#666', marginTop: 15, marginBottom: 15 }}>上一题</div>
          <div className='cutter'></div>
          <div style={{ color: '#666', marginTop: 15, marginBottom: 15 }}>下一题</div>
        </div>
        <div className='backerror'>
          返回错题本
        </div>
        <div className='again' onClick={totest}>
          重新复习
        </div>
      </div>
      <div className='footer'>
        Copyright © 2021  成都蜗牛创想科技有限公司
      </div>
    </div>
  )
}
